<template>
  <!-- 工单列表 -->
  <div class="ticketsList">
    <serchForm
      :Form="financeForm"
      :FormLabel="financeFormLabel"
      @onSearch="onSearch"
    />
    <div class="function-box">
      <el-button
        class="createBtn"
        @click="createVoucher"
      ><i class="iconfont icon-plus-square" />合并生成凭证
      </el-button>
      <el-button
        class="visitBtn"
        @click="openImportTable"
      ><i class="iconfont icon-daochu" />导出</el-button>
    </div>
    <forTableCom
      :bg="bg"
      :color="color"
      :idActive="idActive"
      :limit="pageSize"
      :page="pageNum"
      :tableData="financeTableData"
      :tableHeaderData="financeTableHeaderData"
      :total="totals"
      @handleChange="handleChange"
      @handleSelectionChange="handleSelectionChange"
      @tableDetail="tableDetail"
      @updateLimit="updateLimit"
      @updatePage="updatePage"
    >
      <el-table-column
        :align="'center'"
        class-name="operate"
        fixed="right"
        label="操作"
        width="120px"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-button
            v-show="scope.row.voucherStatus == '未生成'"
            @click="succeed(scope.row)"
          >生成工费凭证
          </el-button>
        </template>
      </el-table-column>
    </forTableCom>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import serchForm from '@/components/inventory/serchForm.vue'
import forTableCom from '@/components/forTableCom/index.vue'
import { getselectOrderApi } from '@/api/tickets/index.js'
import { createVoucherInstallApi, createVoucherOrdersApi } from '@/api/finance/index.js'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 勾选激活行的背景色
const idActive = 'orderId'
// 存储勾选框的对象
let multipleSelection = ref([])
// 表单
let financeForm = ref({
  orderDate: '',
  orderId: '',
  customerId: '',
  customerStore: '',
  creator: '',
  deptId: '',
  voucherStatusItem: '',
})
// 表单数据标题
let financeFormLabel = ref([
  {
    name: 'orderDate',
    label: '单据日期',
    type: 'datetimerange',
  },
  {
    name: 'orderId',
    label: '单据编号',
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer',
  },
  {
    name: 'customerStore',
    label: '终端门店',
  },
  {
    name: 'creator',
    label: '制单人',
  },
  {
    name: 'deptId',
    label: '部门',
    type: 'department',
  },
  {
    name: 'voucherStatus',
    label: '凭证状态',
    type: 'voucherStatusItem',
  },
])
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let financeTableHeaderData = ref([
  {
    prop: 'orderDate',
    label: '单据日期',
    width: 200,
  },
  {
    prop: 'voucherStatus',
    label: '是否生成凭证',
    minwidth: 120
  },
  {
    prop: 'orderId',
    label: '单据编号',
    width: 170,
  },
  {
    prop: 'materialFeeTotal',
    label: '材料费合计',
    minwidth: 100
  },
  {
    prop: 'installationFeeTotal',
    label: '工费合计',
    minwidth: 100
  },
  {
    prop: 'urbanManagementFee',
    label: '城管费合计',
    minwidth: 100
  },
  {
    prop: 'customerName',
    label: '客户名称',
    minwidth: 100
  },
  {
    prop: 'deptName',
    label: '部门',
  },
  {
    prop: 'customerStore',
    label: '终端门店',
    minwidth: 100
  },
  {
    prop: 'totalOrderAmount',
    label: '金额',
  },
  {
    prop: 'totalOrderAmount',
    label: '累计结算金额',
    minwidth: 120
  },
])

// 表格数据内容
let financeTableData = ref([])
// 详情双击行
const tableDetail = (props) => {
  flag.value = true
  disabled.value = true
}
// 生成凭证
const createVoucher = async () => {
  if (multipleSelection.value.length > 0) {
    if (multipleSelection.value[0].voucherStatus != '未生成') {
      return proxy.$modal.msgWarning(`该工单不能生成凭证!`)
    }
    let params = {
      ids: '',
    }
    multipleSelection.value.map((v) => {
      params.ids += v.orderId + ','
    })
    let res = await createVoucherOrdersApi(params)
    if (res.code == 200) {
      proxy.$modal.msgSuccess(res.msg)
      selectProductionListApiFn()
    }
  } else {
    proxy.$modal.msgWarning(`只能选择一个生成凭证的工单!`)
  }
}
// 接口
const getselectOrderData = async (data) => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let { code, rows, total } = await getselectOrderApi(params)
  if (code == 200) {
    // rows.map(v => {
    //     v.designDrawings = JSON.parse(v.designDrawings)
    // })
    financeTableData.value = rows
    totals.value = total
  }
}
// 分页器大小  当前分页器

const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value,
  }
  params.orderDate = null

  getselectOrderData(params)
}

// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

let orderDateLte = ref(null)
let orderDateGte = ref(null)
let searchData = ref(null)
// 查找suppliersName
const onSearch = (v) => {
  orderDateLte.value = v.orderDate[0]
  orderDateGte.value = dayjs(v.orderDate[1]).subtract(1, 'second').format('YYYY-MM-DD HH:mm:ss')
  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...v,
  }
  params.orderDate = null
  pageNum.value = 1
  searchData.value = v
  getselectOrderData(params)
}
// 导出
const openImportTable = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: 10000,
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value,
  }
  params.orderDate = null
  /** 导出按钮操作 */
  proxy.download(
    'system/work/export',
    {
      ...params,
    },
    `config_${new Date().getTime()}.xlsx`,
  )
}
//生成工费凭证 orderId
const succeed = async (row) => {
  let params = {
    orderId: row.orderId,
  }
  if (row.installationFeeTotal === 0) {
    ElMessage.warning('工费合计为0，不能生成凭证')
    return
  }
  let res = await createVoucherInstallApi(params)
  if (res.code == 200) {
    proxy.$modal.msgSuccess(res.msg)
    getselectOrderData()
  }
}

// 表单数据
onMounted(() => {
  getselectOrderData()
})
</script>

<style lang="scss" scoped>
.ticketsList {
  padding: 16px;
}
</style>